import { Component } from 'react';
import './Ht.less';
import Tabs  from 'uxcore-tabs';
import Table from 'uxcore-table';
import EmptyData from 'uxcore-empty-data';
import Matrix from 'uxcore-matrix';
import { URLS } from './../../app/variables';
import Message from 'uxcore-message';

export default class Ht extends Component {

  constructor(props) {
    super(props);
    this.state = {
      fileWait: true
    };
    this.customRender = this.customRender.bind(this);
    this.tabChange = this.tabChange.bind(this);
    this.hideWait = this.hideWait.bind(this);
    this.onFileLoad = this.onFileLoad.bind(this);
  }

  customRender(cellData) {
    const style = {
      lineHeight: '50px',
      textAlign: 'left',
      padding: '0 20px',
      overflow: 'hidden',
    };
    if (cellData.type === 'title') {
      style.textAlign = 'right';
      style.color = 'rgba(0, 0, 0, 0.8)';
      style.fontWeight = 'bold';
      style.background = 'rgba(31,56,88,0.04)';
    }
    let content = cellData.text;
    if (cellData.type === 'link') {
      content = <a>{content}</a>;
    }
    return (
      <div style={style}>
        {content}
      </div>
    );
  }

  tabChange(obj) {
    if (obj === '3' & this.state.fileWait) {
      Message['loading']('请等待...', 35);
    } else {
      this.hideWait();
    }
  }

  onFileLoad() {
    this.setState({fileWait: false});
    this.hideWait();
  }

  hideWait() {
    Message['clear']('clear', 5);
  }

  render() {

    const data = {
      data: [
        {x: 0, y: 0, row: 1, col: 1, type: 'title', text: '合同备案编号'},
        {x: 1, y: 0, row: 1, col: 1, type: 'normal', text: this.props.data.htbh},
        {x: 2, y: 0, row: 1, col: 1, type: 'title', text: '工程质量'},
        {x: 3, y: 0, row: 1, col: 1, type: 'normal', text: this.props.data.zlcn},
        {x: 0, y: 1, row: 1, col: 1, type: 'title', text: '招标控制价'},
        {x: 1, y: 1, row: 1, col: 1, type: 'normal', text: this.props.data.zbkzj},
        {x: 2, y: 1, row: 1, col: 1, type: 'title', text: '合同价'},
        {x: 3, y: 1, row: 1, col: 1, type: 'normal', text: this.props.data.htjk},
        {x: 0, y: 2, row: 1, col: 1, type: 'title', text: '合同工期'},
        {x: 1, y: 2, row: 1, col: 1, type: 'normal', text: this.props.data.htgq},
        {x: 2, y: 2, row: 1, col: 1, type: 'title', text: '计价方式'},
        {x: 3, y: 2, row: 1, col: 1, type: 'normal', text: this.props.data.jjfs},
        {x: 0, y: 3, row: 1, col: 1, type: 'title', text: '价款调整方式'},
        {x: 1, y: 3, row: 1, col: 1, type: 'normal', text: this.props.data.jktsfs},
        {x: 2, y: 3, row: 1, col: 1, type: 'title', text: '争议处理方式'},
        {x: 3, y: 3, row: 1, col: 1, type: 'normal', text: this.props.data.zyclfs},
        {x: 0, y: 4, row: 1, col: 1, type: 'title', text: '工程承包范围'},
        {x: 1, y: 4, row: 1, col: 3, type: 'normal', text: this.props.data.cbfw},
        {x: 0, y: 5, row: 1, col: 1, type: 'title', text: '工程量编制单位'},
        {x: 1, y: 5, row: 1, col: 3, type: 'normal', text: this.props.data.gclbzdw},
        {x: 0, y: 6, row: 1, col: 1, type: 'title', text: '招标控制价编制单位'},
        {x: 1, y: 6, row: 1, col: 3, type: 'normal', text: this.props.data.zbkzjbzdw},

      ]
    };

    const dxgcProps = {
      size: 'small',
      showColumnPicker: false,
      showPager: false,
      jsxdata: {
        "data": this.props.dxgc
      },
      jsxcolumns: [
        {dataKey: 'name', title: '工程名称', width: 185, ordered: false},
        {dataKey: 'jclx', title: '基础类型', width: 120, ordered: false},
        {dataKey: 'jgxs', title: '结构形式', width: 120, ordered: false},
        {dataKey: 'csdx', title: '层数（地下）', width: 100, ordered: false},
        {dataKey: 'csds', title: '层数（地上）', width: 100, ordered: false},
        {dataKey: 'zg', title: '檐高（m）', width: 100, ordered: false},
        {dataKey: 'jzmj', title: '建筑面积（㎡）', width: 100, ordered: false},
        {dataKey: 'kuadu', title: '跨度（m）', width: 100, ordered: false},
        {dataKey: 'htj', title: '合同价', width: 120, ordered: false},
        {dataKey: 'fbfx', title: '分部分项工程费　　（元）', width: 120, ordered: false},
        {dataKey: 'csxm', title: '措施项目费　　（元）', width: 120, ordered: false},
        {dataKey: 'qtxm', title: '其他项目费　　（元）', width: 120, ordered: false},
        {dataKey: 'guifei', title: '规费　　（元）', width: 120, ordered: false},
        {dataKey: 'shuijin', title: '税金　　（元）', width: 120, ordered: false},
        {dataKey: 'zbkzj', title: '招标控制价　　（元）', width: 120, ordered: false},
      ],
    }


    return (
      <div className="mod-ht">

        <Tabs defaultActiveKey="1" type="small" onChange={this.tabChange}>

          <Tabs.TabPane tab="基本信息" key="1">
            <div className="col_1 ht-table-div" style={{height:525}}>
              <Matrix
                data={data}
                cellWidth={[160,315,160,315]}
                render={this.customRender}
              /></div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="单项工程" key="2">
            <div className="col_1 ht-table-div" style={{height:525}}>
              <Table {...dxgcProps} ref="dxgcgrid"/>
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="文档" key="3">
            <div className="col_1  ht-table-div" style={{height:725}}>


              <iframe onLoad={this.onFileLoad}
                      src={ URLS.htWd +  '?docId='+this.props.data.id }
                      height="720" width="1000"
                      frameborder="0"/>
            </div>
          </Tabs.TabPane>
        </Tabs>
      </div>
    );
  }
}
